<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>History</title>
</head>
<body>
<div style="width: 800px;margin: 10px auto 10px auto;font-size: 18px;font-family: 'Microsoft YaHei UI Light'">
    <a name="top">top</a>
    <div><a href="index.html">返回首页</a></div><hr>
    <p>
        The DOM window object provides access to the browser's history through the history object.
        It exposes useful methods and properties that let you move back and forth through the user's history,
        as well as -- starting with HTML5 -- manipulate the contents of the history stack.
    </p>
    <p>
        Windows DOM对象，通过history对象，提供对浏览器历史记录的访问。它公开了有用的方法和属性，使你可以在用户访问历史记录中
        前进或后退。同时--从HTML5开始--也可以直接操纵历史记录堆栈
    </p>
    <hr>
    <div id="eg">
        <h3>Moving forward and backward</h3>
        <hr>
        <div>
            <button onclick="window.history.back()">window.history.back()</button><br><br>
            <button onclick="window.history.forward()">window.history.forward()</button><br><br>
            <button onclick="window.history.go(-1)">window.history.go(-1)</button><br><br>
            <button onclick="window.history.go(1)">window.history.go(1)</button><br><br>
            <button onclick="console.log('window.history.length',window.history.length)">window.history.length</button><br><br>
            <button onclick="usePushState()">usePushState()</button><br><br>
            <button onclick="useReplaceState()">useReplaceState()</button><br><br>
            <button onclick="showState()">showState</button><br><br>
        </div>
        <div style="position: fixed;top: 500px;left:300px;background: green">
            <button onclick="window.location = '#top'">top</button>
            <button onclick="window.location = '#mark01'">mark01</button>
            <button onclick="window.location = '#mark02'">mark02</button>
            <button onclick="window.location = '#mark03'">mark03</button>
        </div>
        <div style="height: 800px">
            <a name="mark01">mark01</a>
        </div>
        <div style="height: 800px">
            <a name="mark02">mark02</a>
        </div>
        <div style="height: 800px">
            <a name="mark03">mark03</a>
        </div>
    </div>
</div>
<script>
    console.log('Let\'s start test!')
    console.log('history.state',history.state)
    function usePushState() {
        var stateObj = { curValue: "1001" };
        // 往历史记录堆栈里压入一条URL记录，附加了状态对象，title,页面路径
        // pushState后，再点前进后退时，并没有发生页面重载。
        // 但是history.state确实更新了
        // 也就是说，不管url如何变化，如果使用pushState手动改变history堆栈，再使用前进或后退页面，页面永远不会重载的（无刷），只是更新了history及其属性state
        // 它的功能不是刷新页面，而是只刷新状态，而不刷新页面。
        // popstate事件：pushState,replaceState不会触发，只有前进或后退才会触发。
        // 而当后退到真正的原始栈中保留的页面时，页面会刷新，因为原始栈不会有stateObj,所以stateObj将为null,并将触发popstate事件
        // 只要不是通过前进后退访问的网页，都将执行进栈,栈元素+1。
        // 所谓的hash-based url指的是利用锚点的技术，路径#后面的部分指url的hash
        // history.pushState(stateObj, "page 2", "5-html5-history-api.html");
        // history.pushState(stateObj, "page 2", "bar.html");
        history.pushState(stateObj,'title','?page=1');
        history.pushState(stateObj,'title','?page=2');
        history.pushState(stateObj,'title','?page=3');
    }
    function useReplaceState() {
        var newStateObj = { newState: 'new state'}
        history.replaceState(newStateObj, 'title','?page=5');
    }
    function showState() {
        console.log('history.state',history.state)
    }
    window.onpopstate = () => {
        console.log('popstate event has triggered!')
    }
</script>
</body>
</html>